<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jq.js"></script>
		<script src="js/slide.js"></script>
	</head>
	<body style="background:#f4f4f4;">
		<div class="container">
			<div class="header header-cont">
				<div class="wrap">
					<div class="header-top">
						<div class="logo">
							<a href="index.html"><img src="img/logo.svg" alt=""></a>
						</div>
						<div class="nav">
							<ul class="clearfix">
								<li>
									<a href="list.html">所有商品</a>
								</li>
								<li><a href="list.html">篮球</a></li>
								<li><a href="list.html">跑步</a></li>
								<li><a href="list.html">新品</a></li>
								<li><a href="list.html">企业团购</a></li>
								<li><a href="list.html">大码鞋</a></li>
								<li><a href="list.html">太极</a></li>
								<li><a href="list.html">秒杀</a></li>
							</ul>
							<div class="subnav">
								<div class="wrap">
									<dl>
										<dt>男鞋</dt>
										<dd><a href="list.html">篮球鞋</a></dd>
										<dd><a href="list.html">篮球鞋</a></dd>
									</dl>
									<dl>
										<dt>男鞋</dt>
										<dd><a href="list.html">篮球鞋</a></dd>
										<dd><a href="list.html">篮球鞋</a></dd>
									</dl>
								</div>
							</div>
						</div>
						<div class="header-top-right">
							<div class="message">
								<ul class="clearfix">
									<li><a id="status" href="login.html">请登录</a></li>
									<li><a id="gwcs" href="shop.html">购物车(<i></i>)</a></li>
									<li><a href="">我的订单</a></li>
									<li>
										<a href="">网站导航</a>
										<div class="submenu">
											<a href="">匹克官网</a>
											<a href="">俱乐部</a>
											<a href="">PEAK+社区</a>
											<a href="">校服/定制</a>
											<a href="">商品大全</a>
											<a href="">正品验证</a>
											<a href="">服务中心</a>
											<a href="">官店微博</a>

										</div>
									</li>
									<li>
										<a href="">联系客服</a>
										<div class="submenu">
											<a href="">售前</a>
											<a href="">售后</a>
										</div>
									</li>
									<li><a href="JavaScript:;">手机版</a></li>
								</ul>
							</div>
							<div class="search">
								<input type="text" id="test">
								<button id="sbtn"><img src="img/icon-seach.png" alt=""></button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main-con">
				<div class="wrap-cont shops">
					<div class="path">您当前所在的位置： 首页 > E04258H</div>
					<div class="shops-cont">
						<div class="shops-cont-top">
							<ul>
								<li>我的购物车</li>
								<li>填写订单</li>
								<li>订单支付</li>
							</ul>
						</div>
						<div class="shops-cont-middle">
							<div class="tips">
								温馨提示<span>：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
							</div>
							<div class="shops-cont-middle-table">
								<table>
									<thead>
										<tr>
											<th>
												<input type="checkbox">
											</th>
											<th>全选</th>
											<th>商品名称</th>
											<th>单价</th>
											<th>数量</th>
											<th>小计</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr id="shoptemp">
											<td class="check"><input type="checkbox"></td>
											<td class="pic"><img src="" alt=""></td>
											<td class="name"></td>
											<td class="unitPrice">￥<i></i></td>
											<td class="number">
												<div class="count">
													<button class="sub">-</button>
													<input class="testvalue" type="text" value="1">
													<button class="add">+</button>
												</div>
											</td>
											<td class="subtotal">￥<i></i></td>
											<td class="edits"><button>删除</button></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="shops-cont-bottom">
							<ul>
								<li><span>继续购物</span></li>
								<li>共<span class="total">2</span>件商品，已选择<span class="s-total"></span>件</li>

								<li><button>去结算</button></li>
								<li>合计（不含运费）：<span class="totalPrice">￥<i></i></span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footer-top">
					<div class="wrap">
						<ul>
							<li>
								<img src="img/foot-icon1.png" alt="">
								<h3>防伪查询</h3>
							</li>
							<li>
								<img src="img/foot-icon2.png" alt="">
								<h3>满99元包邮</h3>
							</li>
							<li>
								<img src="img/foot-icon3.png" alt="">
								<h3>7天无理由退货</h3>
							</li>
							<li>
								<img src="img/foot-icon4.png" alt="">
								<h3>品牌直营</h3>
							</li>
							<li>
								<img src="img/foot-icon5.png" alt="">
								<h3>团购服务</h3>
							</li>
						</ul>
					</div>
				</div>
				<div class="footer-bottom">
					<div class="footer-links">
						<div class="wrap">
							<div class="footer-links-left">
								<dl>
									<dt>购物相关</dt>
									<dd><a href="">新手帮助</a></dd>
									<dd><a href="">购物指南</a></dd>
								</dl>
								<dl>
									<dt>售后服务</dt>
									<dd><a href="">正品验证</a></dd>
									<dd><a href="">退货换货</a></dd>
									<dd><a href="">查看物流</a></dd>
								</dl>
								<dl>
									<dt>会员服务</dt>
									<dd><a href="">关于抵用券</a></dd>
									<dd><a href="">积分规则</a></dd>
								</dl>
								<dl>
									<dt>友情链接</dt>
									<dd><a href="">匹克官网</a></dd>
									<dd><a href="">匹克补货</a></dd>
									<dd><a href="">匹克团购通</a></dd>
									<dd><a href="">匹克校服</a></dd>
									<dd><a href="">匹克品牌</a></dd>
								</dl>
								<dl>
									<dt>服务热线</dt>
									<dd><a href="">售前：0595-2275 0137</a></dd>
									<dd><a href="">售后：400-884-8840</a></dd>
									<dd><a href="">工作日 9:00-23:00(节假日不休息)</a></dd>
								</dl>
							</div>
							<div class="footer-links-right">
								<dl>
									<dt><img src="img/foot-qrcode.jpg" alt=""></dt>
									<dd>匹克官方商城
										微信公众号</dd>
								</dl>
								<dl>
									<dt><img src="img/qrcode.png" alt=""></dt>
									<dd>匹克微服务</dd>
								</dl>
								<dl>
									<dt><img src="img/00.png" alt=""></dt>
									<dd><a href="">立即加入</a></dd>
								</dl>
							</div>
						</div>
					</div>
					<div class="footer-copy">
						<div class="wrap">
							<img src="img/aq.png" alt="">
							<span> Copyright© 2014-匹克网方网店</span>
							<span>版权所有 | 闽ICP备11009488号-1</span>
							<span>移动统计</span>
						</div>
					</div>
				</div>
			</div>
			<div class="f-nav">
				<ul>
					<li>
						<img class="img" src="img/icon-s-item1.png" alt="">
						<img class="h-img" src="img/icon-s-item1-1.png" alt="">
					</li>
					<li>
						<img src="img/icon-s-item2.png" alt="">
						<a href="">购<br />物<br />车</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item9.png" alt="">
						<a href="">优惠<br />券</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item3.png" alt="">
						<a href="">我的<br />收藏</a>
					</li>
					<li class="tbs">
						<img src="img/icon-s-item5.png" alt="">
						<a href="">网站<br />客服</a>
					</li>
					<li class="top">
						<img src="img/icon-s-item8.png" alt="">
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
<script>
	function competedTotal() {
		let totalCount = 0;
		let testc = 0;
		let countList = $(".subtotal i");
		let test = $(".testvalue")
		for (let i = 0; i < countList.length; i++) {
			totalCount = totalCount + Number(countList[i].innerHTML);
			testc = testc +Number(test[i].value)
		}
		document.querySelector(".totalPrice i").innerHTML = totalCount;
		document.querySelector(".total").innerHTML = testc-1;
		document.querySelector("#gwcs i").innerHTML = testc-1;
	}
	function getCookie(key) {
		let cookie = document.cookie;
		let arr = cookie.split("; ");
		let result = {}
		arr.forEach(item => {
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})
		if (key) {
			return result[key];
		}
		return result;
	}
	if (getCookie("username")) {
		$("#status").html(getCookie("username") + "," + "已登录")
	} else {
		$("#status").html("请登录")
	}
	let temp = $("#shoptemp");
	let computed = 0
	if(getCookie("id")){
		$.ajax({
			url: "http://10.35.164.178:8080/shopdata",
			data: {
				id: getCookie("id")
			},
			success(data) {
				let list = JSON.parse(data);
				list.forEach(function(item) {
					let newItem = temp.clone(true);
					newItem.attr("id", "");
					newItem.find("img").attr("src", `img/${item.pic}`);
					newItem.find(".name").html(item.title);
					newItem.find(".unitPrice i").html(item.price);
					newItem.find(".testvalue").val(item.number);
					newItem.find(".subtotal i").html(item.number * item.price);
					newItem.attr("data-id",item.goodsID);
					$(".shops-cont-middle-table tbody").append(newItem);
					competedTotal()
					newItem.find(".add").click(function() {
						let count = Number(newItem.find(".testvalue").val())
						count++;
						newItem.find(".testvalue").val(count);
						newItem.find(".subtotal i").html(count * item.price);
						competedTotal()
					})
					newItem.find(".sub").click(function() {
						let count = Number(newItem.find(".testvalue").val())
						if (newItem.find(".testvalue").val() === "1") {
							return;
						}
						count--;
						newItem.find(".testvalue").val(count)
						newItem.find(".subtotal i").html(count * item.price);
						competedTotal()
					})	
					newItem.find(".edits button").click(function(){
						$.ajax({
							url: "http://10.35.164.178:8080/deleteItem",
							data: {
								id: newItem.attr("data-id")
							},
							success(data){
								newItem.fadeOut(function(){
									this.remove()
								});
							}
						})
						
					})
				})
				
			}
		})
		
	}
</script>
<script>
	$(function() {
		$(".nav ul li,.subnav").hover(function() {
			$(".subnav").toggle()
		})
		$(".top").click(function() {
			$("html").animate({
				scrollTop: 0
			}, 300)
		})
		$(window).scroll(function() {
			if ($(document).scrollTop() === 0) {
				$(".f-nav").stop().animate({
					right: "-40px"
				}, 200)
			} else {
				$(".f-nav").stop().animate({
					right: "0px"
				}, 200)
			}
		})
	})
</script>
